<template>
    <el-dialog title="修改试卷" :visible.sync="dialogFormVisible" :append-to-body="true">
        <el-form :model="form" ref="elForm">
            <div class="table-from">
                <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"
                              maxlength="20" show-word-limit :style="{width:'350px'}"
                    >
                    
                    </el-input>
                </el-form-item>
                
                <el-form-item label="分类" :label-width="formLabelWidth" prop="paper_class"
                              :rules="[
                             {required:true,message:'请设置分类'}
                           ]">
                    <el-select v-model="form.paper_class" placeholder="请设置分类"
                               filterable
                               allow-create
                               default-first-option
                               :class="tableClass.select"
                    >
                        <el-option v-for="element in classList"
                                   v-show="element != null"
                                   :key="element"
                                   :value="element"
                                   :label="element"
                        ></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="期次" :label-width="formLabelWidth" prop="paper_grade"
                              :rules="[{required:true,message:'请设置期次'}]">
                    <el-select v-model="form.paper_grade" placeholder="请设置期次"
                               filterable
                               allow-create
                               default-first-option
                               :class="tableClass.select"
                    
                    >
                        <el-option v-for="element in paperFields.paper_grade"
                                   v-show="element != null"
                                   :key="element"
                                   :value="element"
                                   :label="element"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="难度" :label-width="formLabelWidth" prop="difficulty"
                              :rules="[
                             {required:true,message:'请设置难度'},
                             ]">
                    <el-select v-model.number="form.difficulty" placeholder="请设置难度"
                               filterable
                               allow-create
                               default-first-option
                               :class="tableClass.select"
                    >
                        <el-option v-for="element in paperFields.difficulty"
                                   v-show="element !== null"
                                   :key="element"
                                   :value="element"
                                   :label="element"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="status"
                              :rules="[
                             {required:true,message:'请设置状态'},
                            ]">
                    <el-select v-model.number="form.status" placeholder="请设置状态"
                               filterable
                               allow-create
                               default-first-option
                               :class="tableClass.select"
                    >
                        <el-option v-for="element in paperFields.status"
                                   v-show="element !== null"
                                   :key="element"
                                   :value="element"
                                   :label="element"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updatePaper">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

import { putData } from "@/utils/Util";

export default {
    name: "editTableDialog",
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                id: null,
                name: "",
                paper_class: "",
                paper_grade: "",
                difficulty: null,
                status: ""
            },
            rulesCheck: [],
            paperFields: {
                paper_grade: [],
                difficulty: [],
                status: []
            },
            style: {
                select: {
                    width: "120px"
                }
            },
            tableClass: {
                select: "table-select",
                from: "table-from"
            },
            classList: ["语文", "数学", "英语"],
            
            formLabelWidth: "80px"
        };
    },
    created() {
        // window.addEventListener("storage", this.initDialog);
        // setTimeout(this.initDialog, 1000);
    },
    methods: {
        setVisible(flag) {
            this.dialogFormVisible = flag;
            this.initDialog();
        },
        updatePaper() {
            // 执行更新操作
            this.$refs.elForm.validate(valid => {
                if (valid) {
                    this.dialogFormVisible = false;
                    // console.log("表单::", this.form);
                    putData("/paper/" + this.form.id, this.form).then(res => {
                        console.log("更新完成::", res);
                        if (res >= 1) {
                            this.$emit("updated", this.form);
                        }
                    });
                }
            });
        },
        initDialog() {
            let parse = JSON.parse(sessionStorage.paperGroupField);
            this.classList = parse == null ? this.classList : parse.paper_class;
            this.paperFields = parse;
        }
    }
};
</script>

<style scoped lang="scss">
    .table-from {
        display: flex;
        flex-wrap: wrap;
        
    }
    
    .table-select {
        width: 120px;
    }
</style>